<template>
    <div>
        <div v-if="isShow">
            <div class="win"></div>
            <div class="classDetail">
                <div v-show="!loading" class="centent">
                    <div class="selTittle">选择播报对象</div> 
                     <div class="allStyle">
                         <div v-if="hasSchoolPermission"  @click="checkSchool" class="selHead">
                             <check-icon  :value.sync="allSchool"> 全校 </check-icon>
                         </div>
                         <div class="selHead2" @click="searchStudent">搜索学生</div>
                    </div>
                    <div class="classConter">
                         <tree ref="tree"
                            :data="treeData" 
                            @unselect='unselect'
                            @select="select"
                            :props="{label: 'name', id:'id', children: 'classes'}">
                        </tree>
                    </div>
                    <div class="caoBtn">
                        <div class="reset" @click="reset">重置</div>
                        <div class="confirm" @click="confirm">确定</div>
                    </div>
                </div>
                <div v-if="loading" class="centent">
                    <div class="selTittle"> 加载中...</div> 
                </div>
            </div>
        </div>
        <!-- 学生弹窗 -->
        <div v-if="isStudent">
            <div class="win"></div>
            <div class="classDetail">
                <div class="stuContent">
                    <p>搜索学生</p>
                    <div class="gradClass">
                        <span>年级：</span>
                        <select @change="chooseGrade" v-model="stuGradItem">
                            <option value="">请选择</option>
                            <option v-for="(item,index) in treeData" :value="item" :key="index" >{{item.name}}</option>
                        </select>
                        <span>班级：</span>
                        <select @change="chooseClass" v-model="stuClassId">
                            <option value="">请选择</option>
                            <option v-for="(item,index) in stuClassData" :value="item.id" :key="index" >{{item.name}}</option>
                        </select>
                    </div>
                    <div class="souInput">
                        <input type="text" v-model="stuName" placeholder="学生姓名模糊查询">
                        <div class="confirmBtn" @click="confirmSou">搜索</div>
                    </div>
                    <div class="jinMessge">仅列出有学生证的学生</div>
                    <div class="stuName" v-if="studentData.length > 0">
                        <ul>
                            <li v-for="(item,index) in studentData" :key="index" :class="{'isActive':item.active}" @click="chooseActive(item, index)">{{item.studentName}}</li>
                        </ul>
                    </div>
                    <div class="stuName stuZan" v-else>
                        暂无数据
                    </div>
                    
                </div>
                <div class="caoBtn">
                    <div class="reset" @click="restStudent">重置</div>
                    <div class="confirm" @click="confirmStudent">确定</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import tree from '@/components/treeForClass/tree'
import { CheckIcon } from 'vux'

export default {
    components:{
       tree,
       CheckIcon
    },
    data() {
        return {
            // remarkData:'123',
            treeData:[],
            classData:[],
            allSchool:false,
            loading: true,
            isStudent:false,
            gradList:[],
            stuGradId:'',
            stuGradItem:'',
            stuClassData:[],
            stuClassId:'',
            studentData:[],
            stuName:'',
            activeArr:[],
            hasSchoolPermission:''
        }
    },
     props:{
        isShow:{
            type:Boolean,
            default:true
        }
    },
    mounted() {
        this.getGradList()
        // this.getGradeData()
    },
    methods:{
        confirm(){
            this.$emit('hide')
            this.classData = this.$refs.tree.getSelectedList()
            for (var i = this.classData.length - 1; i >=0; i--) {
                if(this.classData[i].level == 0){
                    this.classData.splice(i, 1)
                }
            }
            // this.classData.forEach((obj,index) => {
            //     if(obj.level == 0){
            //       this.classData.splice(index,1)
            //    }
            // })
            if(this.allSchool){
                this.classData = []
                this.$store.state.broadcast.isSchool = 1
            }else{
                this.$store.state.broadcast.isSchool = 2
            }
            this.$emit('remarkData',this.classData)
        },
        reset(){
            this.classData = []
            this.allSchool = false
            this.$store.state.broadcast.isSchool = 0
            this.$refs.tree.allUnSelect()
        },
        unselect(){
            this.allSchool = false
        },
        select(){
        //    setTimeout(() => {
        //         this.allSchool = this.$refs.tree.isAllSelected()
        //    }, 0) 
            this.$nextTick(() => {
                this.allSchool = this.$refs.tree.isAllSelected()
            }) 
        },
        // 获取年级班级树结构
         getGradList(){
            var prams = {
                SchoolId:this.$store.getters['user/schoolId'],
                GradeId:this.$store.getters['user/gradeId']
            }
            
            this.$store.dispatch('broadcast/BroadcastClass',prams).then((data) => {
                this.treeData = data.schoolClasses
                this.hasSchoolPermission = data.hasSchoolPermission
                this.loading = false
            })
        },
        checkSchool(){
            if(this.allSchool){
                // 全校
                 this.$refs.tree.allSelect()
                 this.$store.state.broadcast.isSchool = 1
            }else{
                // 班级
                this.$refs.tree.allUnSelect()
                this.$store.state.broadcast.isSchool = 2
            }
        },
        // 搜索学生弹窗
        searchStudent(){
            this.isStudent = true
        },
        // 获取年级
        getGradeData(){
          var prams = {
                    schoolId:this.$store.getters['user/schoolId']
                }
               
            this.$store.dispatch('broadcast/GradesBySchoolId',prams).then((data) => {
                 this.gradList = data.data 
            })
        },
        chooseGrade(){
            this.stuClassData = this.stuGradItem.classes
        //     this.stuClassData = []
            this.stuName = ''
            this.studentData = []
            this.stuClassId = ''
        },
        chooseClass(){
            this.stuName = ''
            this.studentData = []
        },
        // 搜索学生
        confirmSou(){
            if(!this.stuGradItem.id){
               this.$vux.toast.text('请选择年级')
               return
            }
            if(!this.stuClassId){
               this.$vux.toast.text('请选择班级')
               return
            }
            var prams = {
                    schoolId:this.$store.getters['user/schoolId'],
                    gradeId:this.stuGradItem.id,
                    classId:this.stuClassId,
                    StudentName:this.stuName
                }
             this.$store.dispatch('broadcast/StudentData',prams).then((data) => {
                 for(var obj of data){
                     obj.active = false
                 }
                 if(this.activeArr.length > 0){
                     for(var obj of data){
                        for(var obj2 of this.activeArr){
                            if(obj.studentId == obj2.studentId){
                                obj.active = true
                            }
                        }
                    }
                 }
                 
                 this.studentData = data 
            })
        },
        // 添加样式
        chooseActive(item, index){
            var isHave = false
            for (var obj of this.activeArr) {
                if (obj.studentId == item.studentId) {
                    isHave = true
                }
            }
            
            if (isHave) {
                for (var i = 0; i < this.activeArr.length; i++) {
                    if (item.studentId == this.activeArr[i].studentId) {
                        this.activeArr.splice(i,1)
                    }
                }
            } else {
                this.activeArr.push(item)
            }


            item.active = !item.active
            // this.studentData.splice(index, 1, item)
        },
        restStudent(){
             for(var obj of this.studentData){
                     obj.active = false
                     this.activeArr = []
                 }
        },
        confirmStudent(){
            if(this.activeArr.length == 0){
                this.stuName = ''
                this.studentData = []
                this.stuClassId = ''
            }
            this.$emit('activeArr',this.activeArr)
            this.isStudent = false
        }
    }
}
</script>
<style  scoped>
.win{
    position: fixed;
    background: black;
    opacity: 0.2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.classDetail{
    position: absolute;
    left: 0.4rem;
    top: 2.15rem;
    background-color: #fff;
    width: 6.4rem;
    height: 8.50rem;
    background: rgba(255,255,255,1);
    border-radius: 10px;
    z-index: 1000;
}
.centent{
    margin: 0 0.6rem;
}
.selTittle{
    line-height: 1.1rem;
    text-align: center;
    font-size: 0.32rem;
    border-bottom: 1px solid #E6E6E6;
}
.classConter{
    height: 5.7rem;
    overflow: auto;
}
.caoBtn{
    border-top: 1px solid #E6E6E6;
    padding-top: 0.14rem;
}
.reset{
    width: 49%;
    font-size: 0.26rem;
    display: inline-block;
    text-align: center;
    border-right: 1px solid #E6E6E6;
    line-height: 0.5rem;
}
.confirm{
    width: 49%;
    font-size: 0.26rem;
    color: #128FEF;
    display: inline-block;
    text-align: center;
    line-height: 0.5rem;
}
/*  */
.arrow{
    cursor: pointer;
    display: inline-block;
    transition: transform .3s;
}
.arrowTransform{
    transform: rotate(90deg);
}
.selected{
    background: #2b85e4;
}
.allStyle{
    font-size: 0.3rem;
    line-height: 0.8rem;
    border-bottom: 1px solid #E6E6E6;
    overflow: hidden;
}
/* ========9-16改 */
.selHead{
  width: 2.4rem;
  float: left;
}
.selHead2{
      width: 2.4rem;
    float: right;
    text-align: right;
    color: #128FEF;
}
.stuContent{
    height: 7.6rem;
}
.stuContent p{
    line-height: 0.8rem;
    font-size: 0.3rem;
    border-bottom: 1px solid #E6E6E6;
    text-align: center;
    color: #333;
}
.gradClass{
    margin-top: 0.24rem;
}
.gradClass select{
    width: 2rem;
    height: 0.5rem;
    border: 1px solid #ddd;
    font-size: 0.24rem;
}
.gradClass span{
    margin-left: 0.24rem;
}
.souInput{
    margin: 0.24rem;
    overflow: hidden;
}
.souInput input{
        width: 4.7rem;
    height: 0.5rem;
    border: 1px solid #ddd;
    font-size: 0.24rem;
    border-radius: 0.08rem;
    float: left;
    padding-left: 0.08rem;
}
.confirmBtn{
    float: left;
    line-height: 0.5rem;
    background-color: #128FEF;
    font-size: 0.24rem;
    color: #fff;
    width: 1rem;
    text-align: center;
    border-radius: 0.08rem; 
    margin-left: 0.1rem;
    margin-top: 0.03rem;
}
.stuName{
    height: 4rem;
    overflow: auto;
    padding-top: 0.24rem;
    padding-bottom: 0.24rem;
}
.stuName li{
    float: left;
    padding: 0.1rem;
    border: 1px solid #ddd;
    margin-left: 0.24rem;
    border-radius: 0.1rem;
    margin-bottom: 0.24rem;
}
.stuZan{
    text-align: center;
}
.isActive{
    border: 1px solid #128FEF !important;
    background-color: #128FEF !important;
    color: #fff !important;
}
.jinMessge{
    margin-left: 0.24rem;
    color: #999;
    font-size: 0.24rem;
    margin-bottom: 0.2rem;
}
</style>
<style>
.allStyle .weui-icon-success:before{
    color:#2b85e4 !important;
}
</style>
